<template>
    <div @click='close' class="pic"> 
        <div class="picinfo">
        <div class="center">
            <swiper :options="swiperOption">
                 <swiper-slide v-for="(item,i) in imgData" :key="i">
                    <div class="item">
                        <img :src="item" alt="">
                    </div>
                 </swiper-slide>
              </swiper>
               
        </div>
        </div>
    </div>
</template>


<script>
export default{
    props:['imgData'],
    methods:{
        close(){
            this.$emit('open')
        }
    },
    data(){
        return{
            swiperOption:{
              loop: true,
              observeParents:true,
              observer:true
            }
        }
    }
}    
</script>


<style lang="scss" scoped>

.pic{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100%;
    z-index: 20;
    .picinfo{
         background-color: #000;
         position: fixed;
         overflow: hidden;
        display: flex;
        align-items: center;
        width: 100%;
        top: 0;
        bottom: 0;
         z-index: 20;
    .center{
        width: 100%;
        .item{
             width: 100%;
             img{
                 width: 100%;
                 height: 100%;
             }
        }
    }
    }
}
</style>

